import React, { Component } from "react";
import { NavBar, Icon, Toast } from "antd-mobile";
// import SearchInput from "../SearchInput/SearchInput";
import SearchInput from "../SearchInput/SearchInput";
import "./ProductList.scss";
import { withRouter } from "react-router-dom";
import { getProductListData } from "../../data/api";
class ProductList extends Component {
  query = "";
  pagenum = 1;
  total = 0; // 页码的总数
  pagesize = 20; // 每页的条数
  state = {
    activeTab: "overall", // 综合 overall sale price
    goods: [], // 商品列表
  };
  handleTabClick = (e) => {
    let activeTab = e.target.dataset["tab"]; // 点击tab项
    this.setState(() => {
      return {
        activeTab: activeTab,
      };
    });
  };
  componentDidMount() {
    // console.log(this.props);
    let that = this;
    let search = this.props.location.search || "";
    let query = search.split("=")[1];
    this.query = query; // 查询需要 query 参数
    // console.log(query);
    this.getProductList();
    /* 监听窗口的滚动事件 */
    window.addEventListener("scroll",this.handleScroll);
  }
  // 组件卸载的时候
  componentWillUnmount(){
     window.removeEventListener("scroll",this.handleScroll);
  }
  handleScroll = (params) => {
    // console.log(e);
    let element = document.documentElement;
    let scrollHeight = element.scrollHeight;
    // console.log("窗口可以滚动的高度",scrollHeight);
    let scrollTop = element.scrollTop;
    // console.log("已经滚动的距离",scrollTop);
    let clientHeight = element.clientHeight;
    // console.log("窗口的高度",clientHeight);
    if (scrollHeight - scrollTop - clientHeight < 10) {
      console.log("列表已经触底啦");
      // 发请求拿数据
      this.getProductList();
    }
  };

  // 获取列表数据的
  getProductList = async () => {
    // total === 0  发请求 第一次
    // Math.ceil(total/pagesize > pagenum) 向上取值 87/20 ===5  总的页面 > 现在页码 发
    if (
      this.total === 0 ||
      Math.ceil(this.total / this.pagesize) > this.pagenum
    ) {
      // 请求的参数
      console.log(this.total, this.pagesize, this.pagenum);
      let params = {
        pagenum: this.pagenum++,
      };
      if (this.query) {
        params.query = decodeURIComponent(this.query);
      }
      if (this.cid) {
        params.cid = this.cid;
      }
      let result = await getProductListData(params);
      this.total = result.message.total || 0;
      this.setState({
        // 追加的逻辑
        goods: [...this.state.goods, ...result.message.goods],
      });
    } else {
      Toast.info("已经到最后一页了");
    }
  };
  // 点击列表的跳转到商品详情的逻辑
  handleListClick = (goods_id) => {
    this.props.history.push("goodDetail?goods_id=" + goods_id);
  };

  render() {
    return (
      <div className="jnProductList">
        <NavBar
          onLeftClick={() => this.props.history.go(-1)}
          icon={<Icon type="left" />}
        >
          商品列表
        </NavBar>
        <SearchInput></SearchInput>
        {/* tabbar 开始  事件委托的方式处理点击事件的*/}
        <div className="productListTabs" onClick={this.handleTabClick}>
          <div
            data-tab="overall"
            className={
              this.state.activeTab === "overall"
                ? "tabsItem active"
                : "tabsItem"
            }
          >
            综合
          </div>
          <div
            data-tab="sale"
            className={
              this.state.activeTab === "sale" ? "tabsItem active" : "tabsItem"
            }
          >
            销量
          </div>
          <div
            data-tab="price"
            className={
              this.state.activeTab === "price" ? "tabsItem active" : "tabsItem"
            }
          >
            价格
          </div>
        </div>
        <div className="tabItemContent">
          <div className={this.state.activeTab === "overall" ? "" : "hidden"}>
            {this.state.goods.map((v) => {
              return (
                <div
                  className="goodsListItem"
                  key={v.goods_id}
                  onClick={this.handleListClick.bind(this, v.goods_id)}
                >
                  <div className="listItemLeft">
                    <img src={v.goods_small_logo} alt="" />
                  </div>
                  <div className="listItemRight">
                    <div className="itemRightTop">{v.goods_name}</div>
                    <div className="itemRightBottom">￥{v.goods_price}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className={this.state.activeTab === "sale" ? "" : "hidden"}>
            2
          </div>
          <div className={this.state.activeTab === "price" ? "" : "hidden"}>
            3
          </div>
        </div>
        {/* tabbar 结束 */}
      </div>
    );
  }
}
export default withRouter(ProductList);
